<template>
  <card :showDivider="false">
    <div class="basic-info-wrapper">
      <div style="margin-top: -30px">
        <a-descriptions :size="'medium'" :align="{ label: 'right' }">
          <a-descriptions-item label="费用金额">{{ unitVal(feeDetail.totalAmount, '元') }}</a-descriptions-item>
          <a-descriptions-item label="实收金额">{{ unitVal(feeDetail.receivedAmount, '元') }}</a-descriptions-item>
          <a-descriptions-item label="待收金额">{{ unitVal(feeDetail.receivedNotAmount, '元') }}</a-descriptions-item>
          <a-descriptions-item label="实付金额">{{ unitVal(feeDetail.payAmount, '元') }}</a-descriptions-item>
          <a-descriptions-item label="待付金额">{{ unitVal(feeDetail.payNotAmount, '元') }}</a-descriptions-item>
          <a-descriptions-item label="对账金额">
            <a-tooltip content="对账金额为线上订单金额-商家承担优惠金额">
              {{ unitVal(feeDetail.statementTotalAmount, '元') }}
              <icon-question-circle />
            </a-tooltip>
          </a-descriptions-item>
        </a-descriptions>
      </div>
      <a-divider :margin="16" />
      <!-- 筛选 -->
      <list-searcher :searchList="searchList" v-model:searchForm="queryParam" @loadData="loadCompulsoryData" />
      <!-- 表格 -->
      <table-index class="insure-card-table" :table="tableCompulsory" @loadData="loadCompulsoryData">
        <template #feeNameSort="{ record }">
          <div v-if="record.mtype == 'MENU'" style="margin-left: 0">{{ record.feeName }}</div>
          <div v-if="record.mtype == 'TERM1'" style="margin-left: 20px">{{ record.feeName }}</div>
          <div v-if="record.mtype == 'TERM2'" style="margin-left: 40px">{{ record.feeName }}</div>
        </template>
        <template #expand-icon="{ expanded }">
          <icon-plus-circle style="font-size: 20px; color: #0256ff" v-if="!expanded" />
          <icon-minus-circle style="font-size: 20px; color: #0256ff" v-else />
        </template>
        <template #remarks="{ record }">
          <a-tooltip :content="record.remark">
            <div class="all-remark">
              {{ record.remark }}
            </div>
          </a-tooltip>
        </template>

        <template #payType="{ record }">
          <div
            >{{ record.payTypeName }}
            <a-tooltip v-if="record.payType == 4 && record.feeNameId == 55 && record.depositDeductionWay">
              <template #content>
                <div v-if="record.depositDeductionWay == 2">
                  <div>违章押金>=违章费时，自动生成1条费用，支持操作</div>
                </div>
                <div v-else>
                  <div>违章押金 {{ text1 }} 违章费时，自动生成两条费用</div>
                  <div>费用1：押金抵扣费用，不支持操作</div>
                  <div>押金2：剩余需要支付的违章费，支持操作，操作结果同步费用1</div>
                </div>
              </template>
              <icon-exclamation-circle style="font-size: 16px; color: #165dff; vertical-align: middle" />
            </a-tooltip>
          </div>
        </template>
      </table-index>
    </div>
  </card>
</template>

<script setup name="costPage" lang="ts">
  import { unitVal } from '@/utils'
  import { useTable } from '@/hooks/table'
  import { getLongOrderFeeDetail } from '@/api/order/czsOrder'
  import { ref, onMounted, computed, reactive } from 'vue'
  import { usePageDict } from '@/hooks/useDict'
  const dict = usePageDict('costConfirmDict')

  const feeDetail = ref<any>({})
  const text1 = ref('<')
  const queryParam = reactive<any>({})
  // 查询条件
  const searchList = computed(() => {
    return [
      { label: '费用类型', prop: 'feeType', type: 'a-select', options: dict.orderFeeTypeEnum },
      { label: '收支类型', prop: 'costType', type: 'a-select', options: dict.costTypeEnum },
      { label: '费用状态', prop: 'feeStatus', type: 'a-select', options: dict.orderFeeStatusEnum },
    ]
  })
  const props = defineProps({
    orderId: Number,
  })
  // 字段处理
  const tabletolist = (list: any[]) => {
    list.forEach((el: any) => {
      el.mtype = 'MENU'
      el.level = 1
      if (el.feeDetailList && el.feeDetailList.length) {
        el.children = el.feeDetailList
        el.children.forEach((pl: any) => {
          pl.id = pl.id + 10000 //因折叠根据id问题(父子级id相同)，数据只做展示，故自定义
          pl.mtype = 'TERM1'
          pl.expand = null
          if (pl.type == 0) {
            pl.feeName = pl.feeCategoryName
            pl.totalAmount = pl.amount
          }
          if (pl.type == 1) {
            pl.feeName = pl.itemName
            pl.totalAmount = pl.amount
          }
          if (pl.childrenList && pl.childrenList.length) {
            pl.children = pl.childrenList
            pl.children.forEach((ol: any) => {
              ol.id = ol.id + 60000 //因折叠根据id问题(父子级id相同)，数据只做展示，故自定义
              ol.mtype = 'TERM2'
              ol.expand = null
              ol.feeName = ol.itemName
              ol.totalAmount = ol.amount
              // ol.children = null
            })
          } else {
            return false
          }
        })
      } else {
        return false
      }
    })
    return list
  }
  const loadCompulsoryData = () => {
    // console.log('插入的筛选条件 queryParam', queryParam)
    const param = {
      id: props.orderId,
    }
    tableCompulsory.tableLoading = true

    getLongOrderFeeDetail(param)
      .then((res: any) => {
        feeDetail.value = res.result
        const result = res.result
        var data1: any[] = []
        var dataOne: any[] = []
        if (result.orderFeeList && result.orderFeeList.length) {
          result.orderFeeList.forEach((i: any) => {
            if (
              (queryParam.feeType == undefined || queryParam.feeType === i.feeType) &&
              (queryParam.costType == undefined || queryParam.costType === i.costType) &&
              (queryParam.feeStatus == undefined || queryParam.feeStatus === i.feeStatus)
            ) {
              dataOne.push(i)
            }
          })
        }
        var data1: any[] = tabletolist(dataOne) //表
        var data2: any[] = []
        // 违章数据处理push
        if (result.violationFeeList && result.violationFeeList.length > 0) {
          var dataTwo: any[] = []
          result.violationFeeList.forEach((i: any) => {
            dataTwo.push(i)
          })
          data2 = violationtilist(dataTwo)
        }
        setTimeout(() => {
          tableCompulsory.dataList = data1.concat(data2)
        }, 0)
      })
      .finally(() => {
        tableCompulsory.tableLoading = false
      })
  }
  const violationtilist = (list: any[]) => {
    list.forEach((el: any) => {
      el.mtype = 'MENU'
      el.level = 1
      el.totalAmount = el.totalAmount
      el.waitPayAmount = el.outstandingAmount //待结金额
      if (el.feeDetailList && el.feeDetailList.length) {
        el.children = el.feeDetailList
        el.children.forEach((pl: any) => {
          pl.id = pl.id + 10000 //因折叠根据id问题(父子级id相同)，数据只做展示，故自定义
          pl.mtype = 'TERM1'
          pl.expand = null
          pl.feeName = pl.itemName
          pl.totalAmount = pl.amount
        })
      } else {
        return false
      }
    })
    return list
  }
  // table 配置
  const tableCompulsory = useTable({
    pagination: false,
    columns: [
      { title: '费用名称', dataIndex: 'feeName', slotName: 'feeNameSort', width: 220, fixed: 'left' },
      { title: '费用类型', dataIndex: 'feeTypeName', width: 120 },
      { title: '收支类型', dataIndex: 'costTypeName', width: 120 },
      { title: '费用金额', dataIndex: 'totalAmount', unit: '元', width: 120 },
      { title: '实结金额', dataIndex: 'payAmount', unit: '元', width: 120 },
      { title: '待结金额', dataIndex: 'waitPayAmount', unit: '元', width: 120 },
      { title: '生成节点', dataIndex: 'createNodeName', width: 90 },
      { title: '生成时间', dataIndex: 'createTime', width: 180 },
      { title: '收支方式', dataIndex: 'payTypeName', slotName: 'payType', width: 140 },
      { title: '费用状态', dataIndex: 'feeStatusName', width: 90 },
      { title: '确认时间', dataIndex: 'confirmTime', width: 180 },
      { title: '确认人', dataIndex: 'confirmUserName', width: 120 },
      { title: '备注', dataIndex: 'remark', slotName: 'remarks', width: 220 },
    ],
  })
  onMounted(() => {
    loadCompulsoryData()
  })
</script>

<style lang="less" scoped>
  .check-box {
    margin-top: 4px;
  }
  .cost-button {
    text-align: right;
    div {
      display: inline-block;
      background: #1890ff;
      color: #fff;
      font-size: 14px;
      border-radius: 2px;
      padding: 4px 10px;
      margin-bottom: 20px;
      cursor: pointer;
    }
  }
  :deep(.arco-table-expand-btn) {
    width: 20px;
    height: 20px;
    background-color: inherit;
  }
  :deep(.arco-table-expand-btn:hover) {
    width: 20px;
    height: 20px;
    background-color: inherit;
  }
  :deep(.arco-table-td-content:empty::before) {
    content: ' ';
  }
  .all-remark {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }
</style>
